<template>
    <div class="credits">
        <i @click="goBack" class="el-icon-arrow-left"></i>
        <ul v-if="this.integralGoods">
            <li style="width: 30%;" v-for='item in integralGoods' :key='item.id'>
                <a @click="creditDetail(item.goodsId)">
                    <img v-if="item.goodsPic" :src="item.goodsPic[0]" alt="">
                    <div class="creditBox">
                        <p style="white-space:nowrap;">{{ item.goodsName | ellipsis }}</p>
                        <div class="creditPrice">
                            {{ item.integral }}积分<br>
                            ￥{{ item.goodsPrice }}
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
import { mapState, mapActions} from 'vuex'
export default {
    created(){
        this.getIntegralGoods();
    },
    computed: {
        ...mapState({
            integralGoods: state => state.personModules.integralGoods,
        })
    },
    methods: {
        ...mapActions({
            getIntegralGoods:'personModules/getIntegralGoods'
        }),
        creditDetail (goodsId) {
            this.$router.push({path:'/creditsDetail',query:{goodsId:goodsId}});
        },
        goBack(){
            this.$router.go(-1);
        }
    },
    filters: {
        ellipsis (value) {
            if (!value) return ''
            if (value.length > 6) {
                return value.slice(0,6) + '...'
            }
            return value
        }
    }
    
}
</script>

<style lang="scss" scoped>
    @import "../../assets/style/order.scss";
    .credits{
        background-color:  #ffffff;
    }
    .el-icon-arrow-left{
        position: fixed;
    top: 10px;
    color: white;
    z-index: 9999;
    background-color: #888;
    border-radius: 50%;
    font-size: 25px;
    left: 10px;
}
</style>
